<template>
	<div class="pay-box" :class="{ active: isActive }">
		<div class="pb-title">请输入密码</div>
		<div class="pb-int flex-center">
			<span v-for="(item, index) in password" :key="index"
				class="item flex-center">{{ item === '' ? '' : '*' }}</span>
		</div>
		<div class="pb-keyboard">
			<span class="figure" v-for="number in 9" :key="number" @click="enterNumber(number)">{{ number }}</span>
			<span class="pb-empty figure" @click="clearPassword">
				<i class="iconfont icon-qingchuhuancun"></i>
			</span>
			<span class="figure" @click="enterNumber(0)">0</span>
			<span class="pb-del figure" @click="deleteNumber">
				<i class="iconfont icon-shanchu"></i>
			</span>
		</div>
	</div>
	<div class="loading-overlay" @click="hidePayBox" v-if="isActive"></div>
</template>

<script>
	export default {
		emits: ['passwordEntered'],
		computed: {
			isActive() {
				return this.$store.state.isActive;
			},
		},
		data() {
			return {
				password: ['', '', '', '', '', ''], // 初始化密码数组，包含6个空字符串，对应6个输入框
				currentIndex: 0, // 当前输入框索引
			};
		},
		methods: {
			enterNumber(number) {
				// 如果当前索引小于6，则更新对应位置的密码数组元素，并将当前索引加1
				if (this.currentIndex < 6) {
					this.password[this.currentIndex] = number.toString();
					this.currentIndex++;
				}

				if (this.currentIndex == 6) {
					this.$emit('passwordEntered', this.password.join(''));
					this.hidePayBox();
				}
			},
			clearPassword() {
				// 清空密码数组，并将当前索引重置为0
				this.password = ['', '', '', '', '', ''];
				this.currentIndex = 0;
			},
			deleteNumber() {
				// 如果当前索引大于0，则将前一个输入框的值置为空，并将当前索引减1
				if (this.currentIndex > 0) {
					this.currentIndex--;
					this.password[this.currentIndex] = '';
				}
			},
			hidePayBox() {
				// 清空密码数组，并将当前索引重置为0
				this.password = ['', '', '', '', '', ''];
				this.currentIndex = 0;
				this.$store.commit('hidePay');
			}
		}
	};
</script>

<style>
	.pay-box {
		color: #252525;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background: #fff;
		width: 100%;
		bottom: 0;
		-webkit-transform: translateY(440px);
		-webkit-transition: .3s;
		border-radius: 25px 25px 0 0;
		opacity: 0;
		left: 0;
	}

	.pay-box.active {
		-webkit-transform: translateY(0);
		opacity: 1;
	}

	.pb-title {
		font-size: 15px;
		text-align: center;
		margin-top: 16px;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pb-int {
		text-align: center;
		margin-top: 20px;
	}

	.pb-int .item {
		width: 50px;
		height: 50px;
		border: 1px solid #eee;
		border-right: 0;
		font-size: 24px;
		font-weight: 700;
	}

	.pb-int .item:last-child {
		border-right: 1px solid #eee;
	}

	.pb-keyboard {
		margin-top: 30px;
		flex-wrap: wrap;
		display: flex;
		align-items: center;
	}

	.pb-keyboard .figure {
		width: 33.33%;
		height: 56px;
		border-top: 1px solid #ccc;
		font-size: 25px;
		text-align: center;
		line-height: 56px;
	}

	.pb-keyboard .figure:nth-child(1),
	.pb-keyboard .figure:nth-child(2),
	.pb-keyboard .figure:nth-child(4),
	.pb-keyboard .figure:nth-child(5),
	.pb-keyboard .figure:nth-child(7),
	.pb-keyboard .figure:nth-child(8),
	.pb-keyboard .figure:nth-child(10),
	.pb-keyboard .figure:nth-child(11) {
		border-right: 1px solid #ccc;
	}

	.pb-keyboard .pb-empty,
	.pb-keyboard .pb-del {
		background: #eee;
		color: #fff;
	}

	.pb-keyboard .figure:active {
		background: #f8f8f8;
	}

	.icon-qingchuhuancun:before {
		content: "\e630";
	}

	.icon-shanchu:before {
		content: "\e627";
	}

	.pb-keyboard i {
		font-size: 25px;
		position: relative;
		bottom: 1px;
		color: #000;
	}
</style>